<template>

    <div class="friend_info">
        <div class="info">
            <div class="pic"><img :src="friend.avatar" alt=""></div>
            <div class="right">
                <div class="name">{{ friend.username }}</div>
                <div class="remark">用户ID：{{ friend._id }}</div>
                <div class="region">地区：广东 深圳</div>
            </div>
            <div class="more">
                <el-dropdown placement="bottom" @command="fdelete()">
                    <el-icon :size="16" color="#888">
                        <More />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu >
                            <el-dropdown-item @click="dialogVisible = true">删除好友</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>


        </div>
        <el-dialog v-model="dialogVisible" width="500" >
            <span>确定删除好友并清除所有聊天记录吗</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="deletefriend">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <div class="send">
            <div class="send_box" @click="sendMag">
                <el-icon :size="30" color="#5b8ef5">
                    <ChatDotSquare />
                </el-icon>
                <p>发信息</p>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, watch, reactive, ref } from 'vue';
import { ChatDotSquare, More } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import type { UserData } from '../types/type';
import { reqDeletefriend, reqOneUserInfo } from '@/api/user';
import useUserStore from '@/store/modules/user';
import { ElMessage } from 'element-plus';
//获取存储用户信息的仓库对象
let userStore = useUserStore();
const userId=userStore.userId
const dialogVisible = ref(false)
// 获取路由参数
let fid = ref()
// 存储好友信息
let friend: UserData = reactive({
    _id: '',
    username: '',
    avatar: '',
    roomName:''
})
const router = useRouter()
const route = useRoute()
const fdelete = () => {


}
// 跳转到聊天框界面
const sendMag = () => {
    // 改变选中的房间ID
    localStorage.setItem('selectedFriendId', friend._id);
    router.push(`/chat/${friend._id}/${friend.roomName}`);
}
// 获取好友信息
const getfriendInfo = async () => {
    const result = await reqOneUserInfo(fid.value)
    if (result.code == 200) {
        friend._id = result.data._id;
        friend.username = result.data.username;
        friend.avatar = result.data.avatar;
    }
}

onMounted(async () => {
    fid.value = route.params.id
    friend.roomName=route.params.roomName as string
    console.log(fid.value);

    await getfriendInfo()

})
// 监听fid切换房间
watch(() => route.params.id, async (newId) => {
    fid.value = newId;
    await getfriendInfo()
});
// 删除好友
const deletefriend = async() => {
    dialogVisible.value = false
   const result= await reqDeletefriend({userId,friendId:friend._id});
   if(result.code==200){
    ElMessage({
        type:'success',
        message:'删除成功'
    })
   }
}

</script>

<style scoped lang="scss">
.img {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 200px;
}

.friend_info {
    width: 100%;
    padding: 150px 300px;

    .info {
        width: 100%;
        margin: auto;
        display: flex;
        height: 90px;
        border-bottom: 1.5px solid #e0e0e0;

        .pic {

            img {
                width: 60px;
                height: 60px;
                object-fit: cover;
                border-radius: 5px;
            }
        }

        .right {
            padding: 0 20px;
            width: 80%;

            .name {
                font-size: 18px;
                margin-bottom: 10px;
            }

            .remark,
            .region {
                color: #888;
                font-size: 14px;
                margin: 8px 0;

            }
        }

        .more {
            width: 20px;
            height: 16px;
            text-align: center;
            line-height: 12px;

            &:hover {
                background-color: #ccc;
            }
        }


    }

    .send {
        width: 100%;
        height: 40px;
        margin-top: 30px;

        .send_box {
            text-align: center;
            width: 80px;
            height: 70px;
            color: #5b8ef5;
            margin: auto;
            padding: 10px;

            &:hover {
                background-color: #ccc;
            }

            p {
                font-size: 14px;
                margin-top: 3px;
            }
        }
    }
}
</style>